<template>
  <Container class="brand-list">
    <div class="container-header large" slot="header">
      <Form class="search">
        <Row>
          <Col span="6">
            <FormItem label="姓名">
              <Input
                class="start"
                v-model="list.form.realname"
                clearable
                placeholder="姓名"
              />
            </FormItem>
            <FormItem label="登录账号">
              <Input
                class="start"
                maxlength="13"
                v-model="list.form.mobile"
                clearable
                placeholder="登录账号"
              />
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="职能类型">
              <Select v-model="list.form.roleId" clearable >
                <Option
                  v-for="item in list.form.roleList"
                  :value="item.id"
                  :key="item.id"
                >{{item.roleName}}</Option>
              </Select>
            </FormItem>
            <FormItem label="是否签约">
              <Select v-model="list.form.contractStatus" clearable >
                <Option
                  v-for="item in list.form.contractStatusList"
                  :value="item.id"
                  :key="item.id"
                >{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col class-name="search" span="2">
            <Button
              class="btn-search large"
              type="primary"
              icon="ios-search"
              @click="onSearchBtnClick"
            ></Button>
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <export-btn 
        :param="exportParam" 
        url='/supplier_salesman/export'
        class="item" 
        slot="extra"></export-btn>
      <Button
        size="large"
        class="item"
        type="primary"
        slot="extra"
        icon="md-add"
        @click="signing">签约工厂业务员</Button>
      <TabPane label="工厂业务员管理" name="tab1">
        <Table
          :height="options.tableHeight"
          stripe
          :columns="list.columns"
          :data="list.data"
          no-data-text="亲，没有找到相关记录哦！~"
        ></Table>
        <div class="pager">
          <Page
            :total="list.totalItem"
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer
            placement="top"
          ></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import table from "@/table";
import FactoryListData from "./list/factoryListData";
import CategorySelect from "@/components/CategorySelect";
import { clearEmpty, formatDate } from "@/util";
export default {
  name: 'setting/factory/list',
  components: {
    CategorySelect
  },
  data() {
    return {
      tab: "tab1",
      list: FactoryListData,
      options: {
        tableHeight: 300
      },
      // form: {
      //   realname: "",
      //   phoneNo: "",
      //   roleList: [],
      //   contractStatusList: [{ id: 0, name: "否" }, { id: 1, name: "是" }]
      // },
    };
  },
  mounted() {
    this.list.currentPage = ~~this.$route.query.currentPage || 1;
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize;
    this.initTable();
    this.getRoleData();
    this.$bus.$on("onEdit", this.onEdit);
    this.$bus.$on("onAppoint", this.onAppoint);
    this.$bus.$on("onRelieveAppoint", this.onRelieveAppoint);
    this.$bus.$on("onDelete", this.onDelete);
    this.getData();
  },
  destroyed() {
    this.$bus.$off();
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.list.currentPage = 1;
      this.getData();
    },
    getRoleData() {
      this.$ajaxGet("/supplier_salesman/findRoles").then(data => {
        this.list.form.roleList = data;
      });
    },
    getData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        realname: this.list.form.realname,
        mobile: this.list.form.mobile,
        roleId: Number(this.list.form.roleId) || "",
        contractStatus: this.list.form.contractStatus
      };
      param = clearEmpty(param);
      this.list.status = "loading";
      this.$jsonPost("/supplier_salesman/page", param)
        .then(data => {
          this.list.data = [];
          this.list.totalItem = Number(data.total);
          this.list.data = data.records || []
          this.list.status = "pass";
        })
        .catch(() => {
          this.list.status = "error";
        });
    },
    signing() {
       this.$router.push({
        path: "/setting/factory/edit",
      });
    },
    // 签约
    onAppoint(p) {
     this.$router.push({
        path: "/setting/factory/edit",
        query: { id: p.row.id}
      });
    },
    //解约
    onRelieveAppoint(p) {
      let param ={
        contractId:p.row.id,
      }
      this.$Modal.confirm({
        title: "解约",
        content: "确定要解约吗？",
        onOk: () => {
          this.$ajaxGet("/supplier_salesman/discontract", param).then(() => {
            this.$Notice.success({
              title: "解约成功"
            });
            this.getData();
          })
        }
      });
    },
    onEdit(id) {
      this.$router.push({
        path: "/setting/factory/edit",
        query: { id: id}
      });
    },
    onPageChange(number) {
      this.list.currentPage = number;
      this.$router.push({
        // name: "product/tag/list",
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1;
      this.list.pageSize = pageSize;
      this.$router.push({
        // name: "product/tag/list",
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    }
  },
  watch: {
    $route() {
      let page = ~~this.$route.query.currentPage;
      let table = this.list;
      if (table.currentPage !== page) {
        table.currentPage =
          ~~this.$route.query.currentPage === 0
            ? 1
            : ~~this.$route.query.currentPage;
        this.getData();
      }
    }
  },
  computed: {
    exportParam() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        realname: this.list.form.realname,
        mobile: this.list.form.mobile,
        roleId: Number(this.list.form.roleId) || "",
        contractStatus: this.list.form.contractStatus
      };
      param = clearEmpty(param);
      return param
    }
  }
};
</script>